<template>
    <div id="add">
      <div class="add">
        <el-form :rules="rules" :model="form">
          <el-form-item prop="dreamTitle">
            <el-input v-model="form.dreamTitle" placeholder="请输入你的梦想" />
          </el-form-item>
          <!-- 上传 -->
          <el-form-item>
            <el-upload
              v-model:file-list="fileList"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <!-- 上传浏览 -->
            <el-dialog v-model="dialogVisible">
              <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
            </el-dialog>
          </el-form-item>
  
          <!-- 介绍 -->
          <el-form-item prop="dreamCon">
            <el-input
              v-model="form.dreamCon"
              type="textarea"
              placeholder="请输入梦想内容"
              :rows="3"
              resize="none"
            />
          </el-form-item>
        </el-form>
  
        <div class="btn">
          <el-button type="primary">新增奋斗</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from "vue";
  import { Plus } from "@element-plus/icons-vue";
  import type { FormRules, UploadProps, UploadUserFile } from "element-plus";
  
  const form = reactive({
    dreamTitle: "",
    dreamImg: "",
    dreamCon: "",
  });
  const rules = reactive<FormRules>({
    dreamTitle: [
      { required: true, message: "请输入梦想名", trigger: "blur" },
      { max: 50, message: "不要超过50", trigger: "blur" },
    ],
    dreamCon: [
      { required: true, message: "请输入梦想的介绍", trigger: "blur" },
      {
        min: 10,
        max: 150,
        message: "不得低于10字,也不要超过150字",
        trigger: "blur",
      },
    ],
  });
  //默认加载图片
  const fileList = ref<UploadUserFile[]>([]);
  
  const dialogImageUrl = ref("");
  //显示预览上传的图片
  const dialogVisible = ref(false);
  //删除图片
  const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };
  //浏览图片
  const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
  </script>
  
  <style lang="less" scoped>
#add {
  width: 100%;
  height: 100%;
  .add {
    :deep(.el-input__wrapper) {
      --el-input-focus-border-color: hotpink;
      background-color: rgb(92, 27, 66);
      .el-input__inner {
        color: white;
        &::-webkit-input-placeholder {
          /* WebKit browsers*/
          color: rgba(hotpink, 0.5);
        }
      }
    }
    :deep(.el-textarea) {
      // 一下为正常
      background-color: transparent;
      .el-textarea__inner {
        overflow: hidden;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 4px;
          height: 100%;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 4px;
          background: mediumvioletred;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          border-radius: 4px;
          background: rgba(mediumvioletred, 0.2);
        }
        background-color: rgb(92, 27, 66);
        --el-input-focus-border-color: mediumvioletred;
        color: white;
        &::-webkit-input-placeholder {
          /* WebKit browsers*/
          color: rgba(hotpink, 0.5);
        }
      }
    }
    :deep(.el-dialog) {
      width: 30%;
      --el-dialog-bg-color: rgba(0, 255, 34, 0.1);
      border-image-source: radial-gradient(
        65% 65%,
        transparent 0px,
        transparent 100%,
        lime 100%
      );
      .el-dialog__title {
        color: lime;
      }
      .el-dialog__close {
        color: lime;
      }
    }
    :deep(.el-upload--picture-card) {
      background: none;
      border: 1px dashed hotpink;
      .el-icon {
        color: hotpink;
      }
    }
    .pImg {
      width: 100%;
    }
    .btn {
      margin-top: 5%;
      margin-left: 75%;
      :deep(.el-button--primary) {
        margin-bottom: 5%;
        --el-button-bg-color: none;
        --el-button-border-color: rgba(hotpink, 0.8);
        --el-button-hover-text-color: black;
        --el-button-hover-bg-color: rgba(hotpink, 0.8);
        --el-button-hover-border-color: rgba(hotpink, 0.8);
      }
    }
  }
}
  </style>
  